<template>
  <div class="search">
    <search-box ref="searchBox" :focus="searchFocus" :hot-search="hotSearchWord" :disabled="false"
                @onClick="onClick" @onClear="onClear" @onChange="onChange" @onConfirm="onConfirm" @onBlur="onBlur"
    ></search-box>
    <tags-card v-if="!showSearchList" header-text="热门搜索词" header-btn="换一波" :tags-array="hotSearchTags"
               @onTagClick="hotTagClick" @onBtnClick="onMoreHotTags"
    ></tags-card>
    <tags-card v-if="!showSearchList" header-text="历史搜索记录" header-btn="清除记录" :tags-array="historySearchTags"
               @onTagClick="onHistoryClick" @onBtnClick="onClearHistory"
    ></tags-card>

    <search-list v-if="showSearchList"></search-list>
  </div>
</template>

<script>
  import SearchBox from '../../components/SearchBox'
  import Tag from '../../components/Tag'
  import TagsCard from '../../components/TagsCard'
  import SearchList from '../../components/SearchList'
  import {getCategories, getBooks, getAuthors, getPublishers, getHotWords} from '../../api/api'
  import {getStorageSync, setStorageSync} from '../../api/wechat'

  const HISTORY_KEY = 'HISTORY_KEY'

  export default {
    name: 'index',
    props: {
      hotSearchWord: {type: String, default: ''}
    },
    components: {SearchList, TagsCard, Tag, SearchBox},
    data () {
      return {
        keyWord: '',
        searchResults: {},
        searchFocus: true,
        hotSearchTags: [],
        historySearchTags: [],
        historySearchTags2: [],
        showSearchList: false,
        hotPage: 1,
        hotPageSize: 6
      }
    },
    methods: {
      onClick () {
        if (!this.searchFocus) {
          this.searchFocus = true
        }
      },
      onClear () {
        this.keyWord = ''
        this.searchResults = {}
      },
      onChange (keyword) {
        // console.log(keyword)
        if (keyword === '' || keyword.trim().length === 0) {
          this.searchResults = {}
          return
        }
        this.obtainSearchResults(keyword)
      },
      onConfirm (value) {
      },
      onBlur (keyword) {
        if (keyword === '' || keyword.trim().length === 0) {
          this.searchResults = {}
          return
        }

        if (!this.historySearchTags.includes(keyword)) {
          this.historySearchTags.push(keyword)
          setStorageSync(HISTORY_KEY, this.historySearchTags)
        }

        // let exist = false
        // this.historySearchTags.forEach((historyTag) => {
        //   if (keyword === historyTag) {
        //     exist = true
        //   }
        // })
        // if (!exist) this.historySearchTags.push(keyword)
      },
      hotTagClick (keyword) {
        // console.log(keyword)
        if (keyword === '' || keyword.trim().length === 0) {
          this.searchResults = {}
          return
        }
        this.$refs.searchBox.setValue(keyword)
        this.obtainSearchResults(keyword)
      },
      obtainHotWords (page) {
        getHotWords({page: page, page_size: this.hotPageSize}).then((response) => {
          console.log(response.data)
          if (response.data.next === null) {
            this.hotPage = 0
          }
          this.hotSearchTags = []
          response.data.results.forEach((item) => {
            this.hotSearchTags.push(item.name)
          })
        }).catch((error) => {
          console.log(error.response)
        })
      },
      onMoreHotTags () {
        this.hotPage += 1
        this.obtainHotWords(this.hotPage)
      },
      onHistoryClick (keyword) {
        console.log(keyword)
        if (keyword === '' || keyword.trim().length === 0) {
          this.searchResults = {}
          return
        }
        this.$refs.searchBox.setValue(keyword)
        this.obtainSearchResults(keyword)
      },
      onClearHistory () {
        this.historySearchTags = []
        setStorageSync(HISTORY_KEY, this.historySearchTags)
      },
      obtainCategories (params) {
        getCategories(params).then((response) => {
          this.searchResults.categories = response.data
          // console.log(response.data)
        }).catch((error) => {
          console.log(error.response)
        })
      },
      obtainBooks (params) {
        getBooks(params).then((response) => {
          this.searchResults.books = response.data
          // console.log(response.data)
        }).catch((error) => {
          console.log(error.response)
        })
      },
      obtainAuthors (params) {
        getAuthors(params).then((response) => {
          this.searchResults.anthors = response.data
          // console.log(response.data)
        }).catch((error) => {
          console.log(error.response)
        })
      },
      obtainPublishers (params) {
        getPublishers(params).then((response) => {
          this.searchResults.publishers = response.data
          // console.log(response.data)
        }).catch((error) => {
          console.log(error.response)
        })
      },
      obtainSearchResults (keyWord) {
        let param = {page: 1, page_size: 100, search: keyWord}
        this.obtainCategories(param)
        this.obtainAuthors(param)
        this.obtainPublishers(param)
        this.obtainBooks(param)
        console.log(this.searchResults)
      }

    },
    mounted () {
      this.$refs.searchBox.setValue('')
      // console.log(this.$route)
      this.hotSearchWord = this.$route.query.hotSearch
      this.historySearchTags = getStorageSync(HISTORY_KEY) || []
      this.obtainHotWords(this.hotPage)
    }
  }
</script>

<style scoped lang="scss">

</style>
